<template>
  <div class="pageHeader">
    <template v-if="title">
      <a-space
        style="
          padding-left: 40px;
          padding-right: 40px;
          width: 100%;
          justify-content: space-between;
        "
      >
        <a-space>
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>{{ title }}</div></a-space
        >
        <div>
          <a-space> <slot name="buts" /></a-space> </div
      ></a-space>
    </template>
  </div>
  <!-- <div>
      <slot />
    </div> -->
  <!-- <div class="footer" v-if="!!slots.footer">
      <a-space> <slot name="footer" /></a-space>
    </div> -->
</template>

<script lang="ts" setup>
  import { PropType, useSlots } from 'vue';
  import { useRouter } from 'vue-router';

  let slots = useSlots();

  withDefaults(
    // 参数说明
    defineProps<{
      title?: string; // title
    }>(),
    {}
  );

  const router = useRouter();

  // 返回箭头
  const back = () => {
    router.back();
  };
</script>

<style lang="less" scoped>
  .pageHeader {
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  :deep(.container-breadcrumb) {
    margin: 5px 0 !important;
  }

  .arco-page-header {
    padding: 10px 0 !important;
  }

  .footer {
    margin-top: 20px;
    border-top: 1px solid var(--color-neutral-3);
    padding: 10px;
    display: flex;
    padding-right: 20px;
    justify-content: center;
  }
</style>
